<template>
  <div class="box">
    <div class="top">
      <img src="@/../public/img/mine/back.png" alt="" class="back" @click="$router.go(-1)">
      <b>编辑个人资料</b>
    </div>
    <div class="dv">
      <b>昵称</b>
      <input type="text" placeholder="请输入新的用户名">
    </div>
    <div class="dv">
      <b>性别</b>
      <van-radio-group v-model="radio" direction="horizontal">
        <van-radio name="1">男</van-radio>
        <van-radio name="2">女</van-radio>
      </van-radio-group>
    </div>
    <div class="dv">
      <b>出生年月</b>
      <input type="text" placeholder="2019/7/13">
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { RadioGroup, Radio, Icon } from 'vant'
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(Icon)
export default {
  data () {
    return {
      active: 0,
      radio: '1'
    }
  },
  methods: {
    showPopup () {
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box {
  @include rect(100%, 100%);
  background-color: white;
  .top {
    @include rect(100%, 0.3rem);
    padding: 0.1rem 0 0 0.16rem;
    position: relative;
    margin-bottom: 0.2rem;
    background-color: #fff;
    img {
      width: 0.16rem;
    }
    b {
      font-size: 0.16rem;
      position: absolute;
      top: 0.1rem;
      left: 35%;
    }
  }
  .dv {
    height: 0.9rem;
    overflow: hidden;
    border-bottom: 1px solid #E1E1E1;
    margin: 0.1rem 0.16rem;
    padding-top: 6px;
    b {
      font-size:0.16rem;
      height: 0.24rem;
      margin-bottom: 0.08rem;
    }
    input {
      font-size: 0.14rem;
      height: 0.24rem;
      width: 95%;
      outline: none;
      border: none;
    }
  }
}
</style>
